<template>
  <up-popup :show="show" @close="hidePopup">
    <view class="header">编辑信息</view>
    <scroll-view class="content" scroll-y>
      <up-form class="p-[30rpx] pt-0" ref="formRef" labelWidth="150rpx">
        <up-form-item label="昵称">
          <up-input v-model="formData.name" placeholder="请输入昵称" />
        </up-form-item>
        <up-form-item class="input" label="客户等级">
          <view class="mask" @click="showLevel=true">
            <up-input v-model="formData.level" placeholder="请选择客户等级" disabled disabledColor="#fff" />
          </view>
          <u-picker
              :show="showLevel"
              :columns="[levelList]"
              title="请选择客户等级"
              keyName="label"
              :defaultIndex="[1]"
              @close="showLevel = false"
              @confirm="handleLevelConfirm"
          >
          </u-picker>
        </up-form-item>
        <up-form-item label="认证状态">
          <up-radio-group class="flex" v-model="formData.status" >
            <up-radio class="mr-20rpx" v-for="(item, index) in statusOptions" :key="index" :name="item.value" :label="item.label"></up-radio>
          </up-radio-group>
        </up-form-item>
        <up-form-item label="备注">
          <up-input v-model="formData.remark" placeholder="请输入备注" />
        </up-form-item>
        <up-form-item label="描述">
          <up-textarea v-model="formData.description" placeholder="请输入备注" textareaBorder />
        </up-form-item>
        <up-form-item label="手机号">
          <up-input v-model="formData.mobile" placeholder="请输入手机号" />
        </up-form-item>
        <up-form-item label="性别">
          <up-radio-group class="flex" v-model="formData.gender" >
            <up-radio class="mr-20rpx" v-for="(item, index) in sexOptions" :key="index" :name="item.value" :label="item.label"></up-radio>
          </up-radio-group>
        </up-form-item>
        <up-form-item label="生日">
          <view class="mask" @click="handleShowDatePicker">
            <up-input v-model="formData.birthday" placeholder="请选择生日" disabled disabledColor="#fff" />
          </view>
          <up-datetime-picker v-model="formData.birthday" :show="showDatePicker" mode="date" @cancel="showDatePicker = false" @confirm="handleDatePickerConfirm"></up-datetime-picker>
        </up-form-item>
        
      </up-form>
      
    </scroll-view>
    <view class="footer">
      <up-button type="primary" @click="handleSubmit" shape="circle">确认提交</up-button>
    </view>
  </up-popup>
</template>

<script lang="ts" setup>
import { computed, ref } from 'vue';
import { getUserLevelApi, updateUserInfoApi } from '@/addon/htscrm/api';
import dayjs from 'dayjs';

const emit = defineEmits(['close', 'change'])

const show = ref(false)
const showLevel = ref(false)
const showDatePicker = ref(false)

const formData = ref({
  uid: '',
  name: '',
  level: '',
  level_id: '',
  jieduan: '',
  beizhu: '',
  mobile: '',
  gender: '1',
  status: '1',
  birthday: '',
  captcha: '',
  guanlian_ok: '',
  fufei: '',
  remark: '',
  description: ''
})
const intentionOptions = [
  {
    text: '待跟进',
    value: '1'
  },
  {
    text: '跟进中',
    value: '2'
  },
  {
    text: '已成交',
    value: '3'
  },
  {
    text: '已复购',
    value: '4'
  },
]

const captchaOptions = [
  {
    label: '否',
    value: '0'
  },
  {
    label: '是',
    value: '1'
  },
]
const sexOptions = [
  {
    label: '男',
    value: '1'
  },
  {
    label: '女',
    value: '2'
  },
  {
    label: '未知',
    value: '0'
  }
]
const statusOptions = [
  {
    label: '已审核',
    value: '1'
  },
  {
    label: '未审核',
    value: '0'
  },
  {
    label: '黑名单',
    value: '-1'
  }
]
const levelList = ref<any[]>([
  {
    label: '普通客户',
    id: '1'
  },
  {
    label: 'VIP客户',
    id: '2'
  
  }
])

const intentionName = computed(() => {
  const item = intentionOptions.find(item => item.value === formData.value.jieduan)
  return item ? item.text : ''
})

function showPopup(value: any) {
  formData.value = {
    ...value, 
    gender: String(value.gender),
    status: String(value.status),
  }
  show.value = true;
  getLevelList()
}
function hidePopup() {
  show.value = false;
  emit('close');
}

function handleLevelConfirm(e:any) {
  console.log(e.value);
  formData.value.level = e.value[0].label;  
  showLevel.value = false;
  formData.value.level_id =e.value[0].id;  
}
function handleShowDatePicker() {
  console.log(111);
  
  showDatePicker.value = true
}
function handleDatePickerConfirm(e:any) {
  console.log(e);
  showDatePicker.value = false
  formData.value.birthday = dayjs(e.value).format('YYYY-MM-DD')
}

async function getLevelList() {
  const res:any = await getUserLevelApi()
  levelList.value = res.data.map((item:any) => {
    return {
      text: item.name,
      value: String(item.id)
    }
  })
}
async function handleSubmit() {
  await updateUserInfoApi(formData.value)
  emit('change', { ...formData.value })
  uni.showToast({title: '修改成功'})
  show.value = false;
}

defineExpose({
  showPopup
})
</script>

<style lang="scss" scoped>
.flex {
  display: flex;
  .text {
    margin-left: 5rpx;
  }
}
.header {
  padding: 30rpx;
  text-align: center;
  font-size: 30rpx;
  font-weight: bold;
}
.content {
  // padding: 0 30rpx;
  box-sizing: border-box;
  height: 60vh;

  .mask {
    width: 100%;
    position: relative;
    &::after {
      content: "";
      width: 100%;
      height: 100%;
      position: absolute;
      left: 0;
      top: 0;
      z-index: 1;
    }
  }

  .radio {
    margin-right: 15rpx;
  }
}
.footer {
  padding: 30rpx;
}
</style>
